﻿<template>
  <div class="add_limit_card_cover clearfix">
    <div class="add_limit_header clearfix">
      <img src="../../static/img/new_style_go_back.png" alt="">
      选定限定卡
    </div>
    <div class="contain_card clearfix">
      <div class="contain_card_header">
        星期一
      </div>
      <div class="swiper_cover">
        <md-card>
          <md-card-media>
            <!-- swiper -->
            <swiper :options="swiperOption">
              <swiper-slide>
                <img src="../../static/img/bg_all.png" alt="" class="swiper_box" style="visibility: hidden;">
              </swiper-slide>
              <swiper-slide>
                <img src="../../static/img/bg_all.png" alt="" class="swiper_box">
              </swiper-slide>
              <swiper-slide>
                <img src="../../static/img/bg_all.png" alt="" class="swiper_box">
              </swiper-slide>
              <swiper-slide>
                <img src="../../static/img/bg_all.png" alt="" class="swiper_box">
              </swiper-slide>
              <swiper-slide>
                <img src="../../static/img/bg_all.png" alt="" class="swiper_box">
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </md-card-media>
        </md-card>
      </div>
    </div>

  </div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  //limit_Scroll
  import { Toast, Indicator, MessageBox } from 'mint-ui';
  import qs from 'qs';
  import "../filter/filter.js";
  import Vue from 'vue';
  import common from "../common/common.js";
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'

  export default {
    name: 'limit_card',
    data() {
      return {
        list: [],
        allLoaded: false,
        bottomStatus: '',
        wrapperHeight: 0,
        swiperOption: {
          slidesPerView: 3,
          spaceBetween: 30,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        },
        swiperSlides:[1,1,1,1]
      }
    },
    created:function(){

    },
    beforeCreate: function () {

    },
    mounted:function(){
      setInterval(() => {
        console.log('simulate async data');
        if (this.swiperSlides.length < 10) {
          this.swiperSlides.push(this.swiperSlides.length + 1)
        }
      }, 3000)
    },
    methods: {

  },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>
<style scrop lang="scss">
@import "./sass/add_limit_card.scss";
</style>

